import { useState } from 'react'
import { Card, Row, Col, Statistic, Button, DatePicker, Select, Space, Table, Progress, Tag } from 'antd'
import { DownloadOutlined, FileTextOutlined, BarChartOutlined, LineChartOutlined, PieChartOutlined, RiseOutlined, FallOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
import './index.scss'

const { RangePicker } = DatePicker

const DataReports = () => {
  const [reportType, setReportType] = useState('overview')
  const [timeRange, setTimeRange] = useState('month')

  // 综合数据
  const overviewData = {
    totalBooks: 3256,
    totalReaders: 14324,
    totalReading: 156890,
    activeRate: 68.5,
    bookGrowth: 12.5,
    readerGrowth: 8.3,
    readingGrowth: 15.6,
    rateChange: 2.3
  }

  // 图书统计数据
  const bookStats = [
    {
      key: '1',
      category: '科幻小说',
      bookCount: 1250,
      readCount: 45680,
      avgRating: 8.9,
      growth: 12.5
    },
    {
      key: '2',
      category: '文学小说',
      bookCount: 2180,
      readCount: 38920,
      avgRating: 9.1,
      growth: 8.3
    },
    {
      key: '3',
      category: '历史人文',
      bookCount: 856,
      readCount: 28560,
      avgRating: 8.7,
      growth: -3.2
    },
    {
      key: '4',
      category: '技术编程',
      bookCount: 1420,
      readCount: 25340,
      avgRating: 8.5,
      growth: 15.6
    },
    {
      key: '5',
      category: '经济管理',
      bookCount: 680,
      readCount: 18920,
      avgRating: 8.3,
      growth: 5.8
    }
  ]

  // 读者统计数据
  const readerStats = [
    {
      key: '1',
      level: 'VIP会员',
      count: 1256,
      percentage: 8.8,
      avgReading: 156,
      growth: 12.5
    },
    {
      key: '2',
      level: '普通会员',
      count: 8542,
      percentage: 59.6,
      avgReading: 45,
      growth: 8.3
    },
    {
      key: '3',
      level: '学生会员',
      count: 3245,
      percentage: 22.7,
      avgReading: 89,
      growth: 15.2
    },
    {
      key: '4',
      level: '试用会员',
      count: 1281,
      percentage: 8.9,
      avgReading: 12,
      growth: -5.6
    }
  ]

  // 表格列配置
  const bookColumns = [
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
      width: 150
    },
    {
      title: '图书数量',
      dataIndex: 'bookCount',
      key: 'bookCount',
      width: 120,
      align: 'center',
      render: (count) => count.toLocaleString()
    },
    {
      title: '阅读量',
      dataIndex: 'readCount',
      key: 'readCount',
      width: 120,
      align: 'center',
      render: (count) => count.toLocaleString()
    },
    {
      title: '平均评分',
      dataIndex: 'avgRating',
      key: 'avgRating',
      width: 120,
      align: 'center',
      render: (rating) => (
        <Tag color="gold">{rating}</Tag>
      )
    },
    {
      title: '增长率',
      dataIndex: 'growth',
      key: 'growth',
      width: 120,
      align: 'center',
      render: (growth) => (
        <span style={{ color: growth >= 0 ? '#52c41a' : '#ff4d4f' }}>
          {growth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
          {Math.abs(growth)}%
        </span>
      )
    }
  ]

  const readerColumns = [
    {
      title: '会员等级',
      dataIndex: 'level',
      key: 'level',
      width: 150
    },
    {
      title: '人数',
      dataIndex: 'count',
      key: 'count',
      width: 120,
      align: 'center',
      render: (count) => count.toLocaleString()
    },
    {
      title: '占比',
      dataIndex: 'percentage',
      key: 'percentage',
      width: 150,
      align: 'center',
      render: (percentage) => (
        <Progress percent={percentage} size="small" />
      )
    },
    {
      title: '平均阅读量',
      dataIndex: 'avgReading',
      key: 'avgReading',
      width: 120,
      align: 'center'
    },
    {
      title: '增长率',
      dataIndex: 'growth',
      key: 'growth',
      width: 120,
      align: 'center',
      render: (growth) => (
        <span style={{ color: growth >= 0 ? '#52c41a' : '#ff4d4f' }}>
          {growth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
          {Math.abs(growth)}%
        </span>
      )
    }
  ]

  /**
   * 导出数据报告
   * 生成并下载报告文件
   */
  const handleExport = () => {
    message.success('正在导出报告...')
    // TODO: 实现报告导出功能
  }

  return (
    <div className="data-reports-container">
      {/* 报告头部 */}
      <Card className="report-header">
        <div className="header-content">
          <div className="header-left">
            <FileTextOutlined className="header-icon" />
            <div className="header-info">
              <h2>数据分析报告</h2>
              <p>全面的数据统计与分析</p>
            </div>
          </div>
          <div className="header-right">
            <Space size="middle">
              <Select
                value={reportType}
                onChange={setReportType}
                style={{ width: 150 }}
              >
                <Select.Option value="overview">综合报告</Select.Option>
                <Select.Option value="books">图书报告</Select.Option>
                <Select.Option value="readers">读者报告</Select.Option>
              </Select>
              <Select
                value={timeRange}
                onChange={setTimeRange}
                style={{ width: 120 }}
              >
                <Select.Option value="week">本周</Select.Option>
                <Select.Option value="month">本月</Select.Option>
                <Select.Option value="quarter">本季度</Select.Option>
                <Select.Option value="year">本年</Select.Option>
              </Select>
              <RangePicker />
              <Button type="primary" icon={<DownloadOutlined />} onClick={handleExport}>
                导出报告
              </Button>
            </Space>
          </div>
        </div>
      </Card>

      {/* 核心指标 */}
      <div className="core-metrics">
        <Row gutter={16}>
          <Col span={6}>
            <Card className="metric-card">
              <Statistic
                title="图书总量"
                value={overviewData.totalBooks}
                prefix={<BarChartOutlined />}
                suffix={
                  <span className="growth-tag positive">
                    <RiseOutlined />
                    {overviewData.bookGrowth}%
                  </span>
                }
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card className="metric-card">
              <Statistic
                title="读者总数"
                value={overviewData.totalReaders}
                prefix={<LineChartOutlined />}
                suffix={
                  <span className="growth-tag positive">
                    <RiseOutlined />
                    {overviewData.readerGrowth}%
                  </span>
                }
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card className="metric-card">
              <Statistic
                title="总阅读量"
                value={overviewData.totalReading}
                prefix={<PieChartOutlined />}
                suffix={
                  <span className="growth-tag positive">
                    <RiseOutlined />
                    {overviewData.readingGrowth}%
                  </span>
                }
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card className="metric-card">
              <Statistic
                title="活跃率"
                value={overviewData.activeRate}
                prefix={<LineChartOutlined />}
                suffix={
                  <span className="growth-tag positive">
                    <RiseOutlined />
                    {overviewData.rateChange}%
                  </span>
                }
                precision={1}
              />
            </Card>
          </Col>
        </Row>
      </div>

      {/* 详细数据 */}
      <Row gutter={16}>
        <Col span={12}>
          <Card 
            className="data-card"
            title={
              <span>
                <BarChartOutlined style={{ marginRight: 8 }} />
                图书分类统计
              </span>
            }
          >
            <Table
              columns={bookColumns}
              dataSource={bookStats}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card 
            className="data-card"
            title={
              <span>
                <PieChartOutlined style={{ marginRight: 8 }} />
                读者等级分布
              </span>
            }
          >
            <Table
              columns={readerColumns}
              dataSource={readerStats}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>

      {/* 数据洞察 */}
      <Card className="insights-card" title="数据洞察">
        <Row gutter={16}>
          <Col span={8}>
            <div className="insight-item">
              <div className="insight-icon positive">
                <RiseOutlined />
              </div>
              <div className="insight-content">
                <h4>图书增长趋势良好</h4>
                <p>本月新增图书 {overviewData.bookGrowth}%，科幻小说类增长最快</p>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="insight-item">
              <div className="insight-icon positive">
                <RiseOutlined />
              </div>
              <div className="insight-content">
                <h4>读者活跃度提升</h4>
                <p>活跃率达到 {overviewData.activeRate}%，环比上升 {overviewData.rateChange}%</p>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="insight-item">
              <div className="insight-icon warning">
                <FallOutlined />
              </div>
              <div className="insight-content">
                <h4>部分分类需关注</h4>
                <p>历史人文类阅读量下降 3.2%，建议优化推荐策略</p>
              </div>
            </div>
          </Col>
        </Row>
      </Card>

      {/* 报告说明 */}
      <Card className="report-notes">
        <h3>报告说明</h3>
        <ul>
          <li>数据统计周期：{timeRange === 'week' ? '本周' : timeRange === 'month' ? '本月' : timeRange === 'quarter' ? '本季度' : '本年'}</li>
          <li>数据更新时间：{new Date().toLocaleString('zh-CN')}</li>
          <li>增长率计算：相比上一周期的增长百分比</li>
          <li>活跃率定义：近7天内有阅读行为的读者占比</li>
        </ul>
      </Card>
    </div>
  )
}

export default DataReports
